import { Meta, Primary, Controls, Canvas, Title, Description } from "@storybook/addon-docs/blocks";

import * as stories from "./chip-select.stories";

<Meta of={stories} />

```ts
import { ChipSelectComponent } from "@bitwarden/components";
```

<Title />
<Description />

<Canvas of={stories.Default} />

## Options

Options are passed to the select via an `options` input.

```ts
@Component({
  selector: `
    <bit-chip-select options=[options]></bit-chip-select>
  `,
})
class MyComponent {
  protected options = [
    {
      label: "Foo",
      value: "foo",
      icon: "bwi-folder",
    },
    {
      label: "Bar",
      value: "bar",
      icon: "bwi-exclamation-triangle tw-text-danger",
    },
    {
      label: "Baz",
      value: "baz",
      disabled: true,
    },
  ];
}
```

### Option Trees

Nested trees of options are also supported by passing an array of options to `children`.

```ts
const options = [
  {
    label: "Foo0",
    value: "foo0",
    icon: "bwi-folder",
    children: [
      {
        label: "Foo1",
        value: "foo1",
        icon: "bwi-folder",
        children: [
          {
            label: "Foo2",
            value: "foo2",
            icon: "bwi-folder",
            children: [
              {
                label: "Foo3",
                value: "foo3",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    label: "Bar",
    value: "bar",
    icon: "bwi-folder",
  },
  {
    label: "Baz",
    value: "baz",
    icon: "bwi-folder",
  },
];
```

<Canvas of={stories.NestedOptions} />

## Placeholder Content

Placeholder content is shown when no item is selected.

```html
<bit-chip-select placeholderText="Foo" placeholderIcon="bwi-key"> </bit-chip-select>
```

## Reading the current value

The component implements `ControlValueAccessor`, so the current selected value can be read via
`ngModel` or `[formControlName]`.

```html
<bit-chip-select [(ngModel)]="..."></bit-chip-select>
```
